<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="时间范围" prop="searchDateRange">
        <el-date-picker clearable size="small"
                        @change="drawBellowsDataChart"
                        v-model="queryParams.searchDateRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="drawBellowsDataChart">搜索</el-button>
      </el-form-item>
    </el-form>
    <div ref="bellowsDataChart" style="width: 100%;height: 600px"></div>
    <div style="text-align: center;font-size: 18px">{{title}}</div>
  </div>
</template>
<script>
  import { getBellowDataDialog } from "@/api/app/stock//bellows";
  import * as echarts from 'echarts'
  export default {
    props:{
      bellowId: Number,
      title: String,
    },
    data() {
      return {
        timer: null,
        selectDate: '',
        queryParams: {
          searchDateRange: [this.moment().subtract('hours', 24).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        },
      }
    },
    created() {
      this.drawBellowsDataChart();
    },
    watch:{
      bellowId(){
        this.reset();
        echarts.init(this.$refs.bellowsDataChart).clear();
        this.drawBellowsDataChart();
      },
    },
    methods: {
      //查询时间重置
      reset(){
        this.queryParams.searchDateRange = [this.moment().subtract('hours', 24).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')];
      },
      drawBellowsDataChart() {
        let data = {
          timeTag: 1,
        };
        if (this.queryParams.searchDateRange) {
          data = {
            startDt: this.queryParams.searchDateRange[0],
            endDt: this.queryParams.searchDateRange[1]
          }
          data.codes=
          getBellowDataDialog(data).then(response => {
            this.$nextTick(() => {
            let list = response.data
            let series = []
            for (let i = 0; i < list.length; i++) {
              let row = list[i]
              let dataList = row.plcHisValueList
              let seriesData = []
              for (let j = 0; j < dataList.length; j++) {
                seriesData.push([dataList[j].updateDt, dataList[j].plcValue])
              }
              if (row.typeName === '温度'){
                series.push({
                  showSymbol: false,
                  name: row.plcName,
                  data: seriesData,
                  type: 'line',
                  smooth: true,
                })
              }else {
                series.push({
                  showSymbol: false,
                  yAxisIndex: 1,
                  name: row.plcName,
                  data: seriesData,
                  type: 'line',
                  smooth: true,
                })
              }
            }

            let chart = echarts.init(this.$refs.bellowsDataChart)
            chart.setOption({
              /** 保存echart图片 **/
              toolbox: {
                show: true,
                feature: {
                  saveAsImage: {
                    show:true,
                    excludeComponents :['toolbox'],
                    pixelRatio: 2
                  }
                }
              },
              grid: {
                left: 60,
                right: 60,
                bottom: 20,
                containLabel: true
              },
              "backgroundColor": "rgba(0, 0, 0, 0)",
              dataZoom: {
                type: 'inside',
                zoomOnMouseWheel: true,
              },
              xAxis: {
                type: 'category',
              },
              yAxis: [{
                name: '风箱废气温度，℃',
                type: 'value',
                splitLine: {
                  lineStyle: {
                    type: 'dotted',
                    //color: ['#aaa', '#ddd']
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#000'
                  },
                },
                min: function(val) {
                  return parseInt(val.min - 20)
                },
                max: function(val) {
                  return parseInt(val.max + 20)
                },
              },
                {
                  name: '风箱负压，KPa',
                  type: 'value',
                  splitLine: {
                    lineStyle: {
                      type: 'dotted',
                      color: ['#aaa', '#ddd']
                    }
                  },
                  axisLabel: {
                    textStyle: {
                      color: '#000'
                    },
                  },
                  min: function(val) {
                    return parseInt(val.min - 20)
                  },
                  max: function(val) {
                    return parseInt(val.max + 20)
                  }
                }],
              tooltip: {
                trigger: 'axis', //设置tip提示
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                left: 'center',
              },
              series: series
            }, true)
            })
          })
        }
      },
    }
  }
</script>
